﻿<template>
  <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '40%' @close = 'resetForm'
  append-to-body :close-on-click-modal = "false" :close-on-press-escape = "false">
    <div v-loading = 'loading'>
      <el-collapse accordion class = 'myCollapse' value = 'inputDic'>
        <el-collapse-item title = '事件请求词典表' name = 'inputDic'>
          <div class = "addColumn">
            <p @click = "handleAddOption('inputDic')"><i class="iconfont icon-add"></i>添加事件请求词典表</p>
          </div>
          <el-table :data = 'inputDic' style = "width:100%;" max-height = 300 empty-text = "暂无数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'inputKey' label = '请求主键(apiKey = pageKey)' show-overflow-tooltip :render-header = 'handelHelp'
            label-class-name="示例：API中键名称=页面中展示的键名称(如果是常量，需要在前加 @ 符号)">
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.inputKey" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "30">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleOptionsRemove('inputDic', scope.$index)" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title = '事件响应词典表' name = 'outputDic'>
          <div class = "addColumn">
            <p @click = "handleAddOption('outputDic')"><i class = "iconfont icon-add"></i>添加事件响应词典表</p>
          </div>
          <el-table :data = 'outputDic' style = "width:100%;" max-height = 300 empty-text = "暂无数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'outputKey' label = '响应主键(pageKey = apiKey)' show-overflow-tooltip :render-header = 'handelHelp'
            label-class-name = "示例：API中键名称=页面中展示的键名称(如果是常量，需要在前加 @ 符号)">
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.outputKey" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "30">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleOptionsRemove('outputDic', scope.$index)" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
      <div class = 'buttonContent'>
        <el-button type = "info" @click = "resetForm">取 消</el-button>
        <el-button type = "primary" @click = "submitForm">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ['row', 'eventDicDialog'],
  data () {
    return {
      dialogTitle: '配置事件词典表',
      dialogFormVisible: false,
      inputDic: [],
      outputDic: [],
      loading: false
    }
  },
  methods: {
    initPage () {
      this.inputDic = []
      this.outputDic = []
      if (this.row.inputDic.length || this.row.outputDic.length) {
        this.row.inputDic.forEach((item, index) => {
          this.$set(this.inputDic, index, item)
        })
        this.row.outputDic.forEach((item, index) => {
          this.$set(this.outputDic, index, item)
        })
      } else {
        this.getEventsInfoByEventNo(this.row.eventsNo)
      }
    },
    // 根据事件编号获取事件详细---models数据、事件编号、是否是初始化事件
    getEventsInfoByEventNo (eventItemNo) {
      // 获取事件的详细
      this.$get('/events4dform/' + eventItemNo).then(data => {
        this.loading = false
        let dataInfo = data.data.result
        if (dataInfo.code === 'failed') {
          this.$message({
            message: dataInfo.msg,
            type: 'error'
          })
        }
        if (dataInfo.code === 'success') {
          if (dataInfo.data.request_parameters) {
            let parametersObj = JSON.parse(dataInfo.data.request_parameters)
            if (parametersObj.RequestPostData && !this.$isEmptyObject(parametersObj.RequestPostData)) {
              for (let postKey in parametersObj.RequestPostData) {
                if (postKey === 'limit') {
                  this.inputDic.push({inputKey: 'limit=$_limit'})
                } else if (postKey === 'page') {
                  this.inputDic.push({inputKey: 'page=$_page'})
                } else if (postKey === 'FormKey') {
                  this.inputDic.push({inputKey: 'FormKey=$_FormKey'})
                } else {
                  this.inputDic.push({inputKey: postKey + '=' + postKey})
                }
              }
            }
            if (parametersObj.RequestQueryString && !this.$isEmptyObject(parametersObj.RequestQueryString)) {
              for (let queryKey in parametersObj.RequestQueryString) {
                if (queryKey === 'limit') {
                  this.inputDic.push({inputKey: 'limit=$_limit'})
                } else if (queryKey === 'page') {
                  this.inputDic.push({inputKey: 'page=$_page'})
                } else if (queryKey === 'FormKey') {
                  this.inputDic.push({inputKey: 'FormKey=$_FormKey'})
                } else {
                  this.inputDic.push({inputKey: queryKey + '=' + queryKey})
                }
              }
            }
          }
        }
      }).catch(error => {
        this.loading = false
        this.$message({
          message: error,
          type: 'warning'
        })
      })
    },
    // 表头的提示信息
    handelHelp (h, {column}) {
      if (column.labelClassName) {
        return (
          <el-tooltip effect = "dark" placement = "top">
            <div slot = 'content'>{column.labelClassName}</div>
            <span>{column.label}</span>
          </el-tooltip>
        )
      }
    },
    // 添加时
    handleAddOption (type) {
      if (type === 'inputDic') {
        this.inputDic.push({inputKey: ''})
      } else if (type === 'outputDic') {
        this.outputDic.push({outputKey: ''})
      }
    },
    // 删除时
    handleOptionsRemove (type, index) {
      if (type === 'inputDic') {
        this.inputDic.splice(index, 1)
      } else if (type === 'outputDic') {
        this.outputDic.splice(index, 1)
      }
    },
    // 取消时
    resetForm () {
      this.$emit('giveUp')
    },
    // 确定时
    submitForm () {
      let toParent = {
        inputDic: this.inputDic,
        outputDic: this.outputDic
      }
      this.$emit('sureSeetingEventDic', toParent)
    }
  },
  watch: {
    eventDicDialog: {
      handler (val) {
        this.dialogFormVisible = val
        if (val) {
          this.initPage()
        }
      },
      deep: true
    }
  }
}
</script>

<style lang = 'scss' scoped>
.buttonContent{
  text-align: center;
  margin-top: 16px;
}
</style>
